<template>
  <div>
    <div class="test-div__card">

    </div>

    <div class="test-div__card">
      <el-table
        :data="state.tableData"
        border
        stripe
      >
        <el-table-column
          :label="$t('app1.user.userList.table.username')"
          prop="username"
        ></el-table-column>
        <el-table-column
          :label="$t('app1.user.userList.table.name')"
          prop="name"
        ></el-table-column>
        <el-table-column
          :label="$t('app1.user.userList.table.role')"
          prop="role"
        ></el-table-column>
        <el-table-column
          :label="$t('app1.user.userList.table.status')"
          prop="status"
        >
          <template v-slot="{ row }">
            <span v-if="row.status === 0">正常</span>
            <span v-else-if="row.status === 1">冻结</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('app1.user.userList.table.createTime')"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          :label="$t('app1.user.userList.table.lastTime')"
          prop="lastTime"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import Mock from 'mockjs'

const username = []
const createTime = []
const lastTime = []
for (let i = 0; i < 10; i++) {
  username.push(Mock.Random.email('qq.com'))
  createTime.push(Mock.Random.date('yyyy-MM-dd HH:mm:ss'))
  lastTime.push(Mock.Random.date('yyyy-MM-dd HH:mm:ss'))
}

const mock = Mock.mock({
  'data|10': [
    {
      id: '@guid',
      'username|+1': username,
      name: '@cname',
      role: '@ctitle',
      'status|1': [0, 1],
      'createTime|+1': createTime,
      'lastTime|+1': lastTime
    }
  ]
})

const state = reactive({
  tableData: mock.data
})
</script>

<style lang="less" scoped>
</style>
